<template>
	<div>
		<div class="toolbar">
			<el-button plain type="primary" icon="el-icon-plus" size="mini" @click="openDialog">新增</el-button>
		</div>

		<!-- 列表 -->
		<el-table :data="menu_list" row-key="id" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column prop="title" label="名称"></el-table-column>
			<el-table-column label="图标">
				<template slot-scope="scope">
					<i :class="scope.row.icon"></i>
				</template>
			</el-table-column>
			<el-table-column prop="serialNumber" label="排序"></el-table-column>
			<el-table-column prop="Identifier" label="权限标识"></el-table-column>
			<el-table-column prop="path" label="组件路由"></el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-plus" size="mini" @click="showDialog(scope.row, 'add')">新增</el-button>
					<el-button type="text" icon="el-icon-edit" size="mini" @click="showDialog(scope.row, 'edit')">编辑</el-button>
					<el-button type="text" icon="el-icon-delete" size="mini" @click="deleteMenu(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 菜单窗口 -->
		<el-dialog title="新增菜单" :visible.sync="menuDialog" width="45%" :close-on-click-modal="false" @closed="handleClose">
			<el-form ref="menuForm" :model="menuForm" :rules="rules" label-width="80px">
				<el-form-item label="菜单类型" prop="type">
					<el-radio-group v-model="menuForm.type" :disabled="is_top">
						<el-radio :label="true">菜单</el-radio>
						<el-radio :label="false">按钮</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-row :gutter="10">
					<el-col :span="12">
						<el-form-item label="菜单名称" prop="title">
							<el-input v-model="menuForm.title" placeholder="输入菜单名称" size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜单排序" prop="serialNumber">
							<el-input-number v-model="menuForm.serialNumber" size="small" controls-position="right" :min="1"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10" v-if="menuForm.type">
					<el-col :span="12">
						<el-form-item label="路由地址" prop="path">
							<el-input v-model="menuForm.path" placeholder="输入路由地址" size="small"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="菜单图标" prop="icon">
							<el-input v-model="menuForm.icon" placeholder="输入菜单图标" size="small"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="权限标识" prop="Identifier">
					<el-input v-model="menuForm.Identifier" placeholder="输入权限标识" size="small"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="medium" @click="menuDialog = false">取 消</el-button>
				<el-button size="medium" type="primary" @click="submitMenu">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
// import { getMenulist } from "../../../api/login";
import { menusTree, addMenu, updMenu, delMenu } from "../../../api/system/menu";
export default {
	data() {
		return {
			menu_list: [],
			menuDialog: false,
			// 顶级菜单只允许创建菜单/菜单编辑状态禁止切换类型
			is_top: false,
			menuId: "", // 当前编辑菜单id
			menuForm: {
				type: true, // true : 1 菜单
				title: "",
				serialNumber: "",
				path: "",
				icon: "",
				Identifier: "",
				pid: ""
			},
			rules: {
				type: [{ required: true }],
				title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
				serialNumber: [{ required: true }]
			}
		};
	},
	created() {
		this.getMenuList();
	},
	methods: {
		// 菜单列表
		async getMenuList() {
			const res = await menusTree();
			this.menu_list = res.data;
		},
		// 显示(顶级目录)
		openDialog() {
			// 顶级目录下：只允许菜单添加，禁用单选框
			this.is_top = true;
			this.menuDialog = true;
		},
		// 显示
		showDialog(row, btn) {
			if (btn === "add") {
				// 新增下一级: 设置pid 为当前上级目录id
				this.menuForm.pid = row.id;
			} else {
				// 修改当前: 显示当前信息
				this.menuForm.type = row.type;
				this.menuForm.title = row.title;
				this.menuForm.serialNumber = row.serialNumber;
				this.menuForm.path = row.path;
				this.menuForm.icon = row.icon;
				this.menuForm.Identifier = row.Identifier;
				this.menuForm.pid = row.pid;
				// 编辑状态禁止切换类型
				this.is_top = true;
				// 存储当前id
				this.menuId = row.id;
			}
			this.menuDialog = true;
		},
		// 关闭
		handleClose() {
			this.is_top = false;
			this.menuId = "";
			this.$refs.menuForm.resetFields();
		},
		// 提交
		async submitMenu() {
			if (this.menuForm.title) {
				if (this.menuId) {
					// 修改: 设置当前id
					this.menuForm.id = this.menuId;
					await updMenu(this.menuForm);
					this.$message.success("修改成功");
				} else {
					// 新增
					await addMenu(this.menuForm);
					this.$message.success("添加成功");
				}
				this.menuDialog = false;
				this.getMenuList();
			}
		},
		// 删除
		async deleteMenu(id) {
			const result = await this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).catch((err) => err);
			if (result !== "confirm") {
				return this.$message.info("取消了删除");
			}
			await delMenu({ id: id });
			this.$message.success("删除成功");
			this.getMenuList();
		}
	}
};
</script>

<style lang="scss" scoped>
</style>